<template>
  <div class="page">
    <b-scroll height="400px">
      <b-table
        show-border
        stripe
        stripe-background-color="#f9f9f9"
        class="table"
      >
        <b-table-head slot="head" split>
          <b-table-tr>
            <b-table-td width="50px"></b-table-td>
            <b-table-td width="60px">操作</b-table-td>
            <b-table-td>音乐标题</b-table-td>
            <b-table-td>歌手</b-table-td>
            <b-table-td>专辑</b-table-td>
            <b-table-td width="120px">时长</b-table-td>
          </b-table-tr>
        </b-table-head>
        <b-table-body slot="body">
          <b-table-tr v-for="(item, index) in count" :key="index">
            <b-table-td width="50px">{{ index + 1 }}</b-table-td>
            <b-table-td width="60px"
              ><i class="iconfont icon-xihuan"></i
            ></b-table-td>
            <b-table-td>{{ res.name }}</b-table-td>
            <b-table-td>{{ res.artist }}</b-table-td>
            <b-table-td>{{ res.album }}</b-table-td>
            <b-table-td width="120px">{{ res.time }}</b-table-td>
          </b-table-tr>
        </b-table-body>
      </b-table>
    </b-scroll>
    <div class="item">
      <b-scroll height="400px">
        <b-table
          show-border
          stripe
          stripe-background-color="#f9f9f9"
        >
          <b-table-head slot="head" split>
            <b-table-tr>
              <b-table-td width="50px"></b-table-td>
              <b-table-td width="60px">操作</b-table-td>
              <b-table-td>音乐标题</b-table-td>
              <b-table-td>歌手</b-table-td>
              <b-table-td>专辑</b-table-td>
              <b-table-td width="120px">时长</b-table-td>
            </b-table-tr>
          </b-table-head>
          <b-table-body slot="body">
            <b-table-tr v-for="(item, index) in count" :key="index">
              <b-table-td width="50px">{{ index + 1 }}</b-table-td>
              <b-table-td width="60px"
                ><i class="iconfont icon-xihuan"></i
              ></b-table-td>
              <b-table-td>{{ res.name }}</b-table-td>
              <b-table-td>{{ res.artist }}</b-table-td>
              <b-table-td>{{ res.album }}</b-table-td>
              <b-table-td width="120px">{{ res.time }}</b-table-td>
            </b-table-tr>
          </b-table-body>
        </b-table>
      </b-scroll>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      count: 50,
      res: {
        name: "放纵啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
        artist: "miss",
        album: "放飞自我啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
        time: "4:30",
      },
    };
  },
};
</script>
<style scoped>
.item {
  width: 500px;
  height: 400px;
  margin: 10px 0px;
}
</style>